<template>

  <div>
    <el-container>
      <client-only>
      <el-main>
        <div id="id_test_video" style="width:100%; height:auto;"></div>
        <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose">
          <span>直播已关闭</span>
          <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
        </el-dialog>
      </el-main>
      </client-only>
    </el-container>
  </div>
</template>

<script>
  import open_live from "@/api/open_live"
  export default {

    data(){
      return{
        dialogVisible: false
      }
    },
    created() {
      this.$nextTick(() => {
        this.createVideo()
      });
    },
    methods:{
      createVideo(){
        open_live.getById(this.$route.params.oid).then(response =>{
          var flv=response.data.data.flv
          var m3u8=response.data.data.mu38
          var id=this.$route.params.oid
          console.log(id)
          var player =  new TcPlayer('id_test_video', {
            "flv":flv,
            "m3u8": m3u8,
            "autoplay" : true,      //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
            "poster" : "http://www.test.com/myimage.jpg",
            "width" :  '100%',//视频的显示宽度，请尽量使用视频分辨率宽度
            "height" : '620',//视频的显示高度，请尽量使用视频分辨率高度
            flash:false,//优先h5播放器  如果是true则是优先flash播放
            controls:"default",//不显示控件
            volume:0,//测试初始音量[0-1] 设置为0 静音 大多浏览器会恢复自动播放功能
            live:true,//是否为直播
            wording: {//定义错误提示语
              2032: "",
              2048: ""
            },
            listener: function(msg) {
              console.log(msg)
              if (msg.type == "error") {
                open_live.getById(id).then(response =>{
                  var status2=response.data.data.status
                  if(status2==1){
                    open_live.deleteById(id).then(response =>{
                    })
                    alert("直播已结束")
                    window.location="/online"
                  }else if(status==0){
                    alert("直播还没开始")
                    window.location="/online"
                  }
                })
              }else if(msg.type== "playing") {
                open_live.changeOpen(id).then(response =>{
                })
              }
              }
          })
        })

      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
    }
  }
</script>
